<template>
  <div class="reject-dialog-wrapper">
    <!-- <ListTitle list-title="驳回审核"></ListTitle> -->
    <div class="dialog-header">
      <slot name="header">
        <!-- <h3 class="dialog-title">需求管理分析</h3> -->
        <h3 class="dialog-title">驳回审核</h3>
      </slot>
      <button class="dialog-close-btn" @click="handleClose"></button>
    </div>
    <!-- 关闭按钮 -->

    <!-- 分析前按钮 -->
    <!-- <div v-if="!showResultSection" class="reject-dialog-container">
      <div style="padding: 20px;">
        <button type="primary" @click="startAnalysis" :loading="analyzing" class="analysis-btn" >
          {{ analyzing ? '分析中...' : '开始分析' }}
        </button>
      </div>
    </div> -->

    <div class="reject-dialog-container">
      <!-- 分析结果 -->
      <!-- <div class="analysis-result">
        <div class="result-item">
          <span class="label">时间冲突分析：</span>
          <el-tag :type="weatherStatus === 'success' ? 'success' : 'danger'" effect="dark">
            {{ weatherStatus === 'success' ? '成功' : '失败' }}
          </el-tag>
        </div>
        <div class="result-item">
          <span class="label">空域冲突分析：</span>
          <el-tag :type="airspaceStatus === 'success' ? 'success' : 'danger'" effect="dark">
            {{ airspaceStatus === 'success' ? '成功' : '失败' }}
          </el-tag>
        </div>
      </div> -->

      <!-- 表单主体 -->
      <el-form v-if="showRejectForm" label-width="90px" class="reject-form">
        <!-- 驳回原因复选框 -->
        <el-form-item label="驳回原因">
          <el-form-item>
            <el-checkbox-group v-model="rejectReasons">
              <el-checkbox label="空域使用时间冲突"></el-checkbox>
              <el-checkbox label="空域使用空间冲突"></el-checkbox>
              <el-checkbox label="任务类型不符"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-form-item>

        <!-- 时间调整建议（仅在选择了时间冲突时显示） -->
        <el-form-item v-if="rejectReasons.includes('空域使用时间冲突')" label="时间调整">
          <el-date-picker v-model="adjustTimeRange" type="datetimerange" start-placeholder="开始时间" end-placeholder="结束时间"
            :picker-options="{ step: '00:15' }" style="width: 100%;" />
        </el-form-item>

        <!-- 空域建议（仅在选择了空间冲突时显示） -->
        <el-form-item v-if="rejectReasons.includes('空域使用空间冲突')" label="空域建议">
          <el-input type="textarea" v-model="adjustUsingAirspace" placeholder="请输入空域调整建议" />
        </el-form-item>
      </el-form>

      <!-- 操作按钮区域 -->
      <div class="button-group">
        <!-- <button class="analysis-btn" @click="handleClose">
          取消
        </button> -->

        <!-- 初始两个按钮 -->
        <!-- <template v-if="!showRejectForm">
          <button class="analysis-btn" @click="handleAccept">
            接收
          </button>
          <button class="analysis-btn" @click="showRejectForm = true">
            驳回
          </button>
        </template> -->

        <!-- 展示驳回表单后的确认按钮 -->
        <template>
          <button class="analysis-btn" @click="handleConfirm">确认驳回</button>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import ListTitle from "../components/ListTitle";

export default {
  name: 'CustomDialogReject',
  props: {
    visible: Boolean,           // 控制弹窗显示
    applicationId: String,      // 当前申请单的ID
    initReasons: Array,         // 初始化默认勾选的驳回理由
    initTimeRange: Array,       // 初始化默认的时间范围建议
    initAirspaceAdvice: String,  // 初始化默认的空域建议
    weatherStatus: String,
    airspaceStatus: String
  },
  components: {
    ListTitle,
  },
  data() {
    return {
      rejectReasons: [],         // 用户选择的驳回原因（数组）
      adjustTimeRange: [],       // 用户填写的时间调整范围
      adjustUsingAirspace: '',    // 用户填写的空域建议
      showResultSection: false,   // ✅ 是否展示分析结果和驳回部分
      analyzing: false,           // ✅ 是否正在分析中
      showRejectForm: true,      // 是否打算驳回
    };
  },
  watch: {
    // 监听弹窗打开时自动填充初始数据
    visible(val) {
      console.log('子组件收到 visible 更新：', val);
      if (val) {
        this.rejectReasons = this.initReasons || [];
        this.adjustTimeRange = this.initTimeRange || [];
        this.adjustUsingAirspace = this.initAirspaceAdvice || '';
      }
    }
  },
  methods: {
    handleAccept() {
      this.$emit("accept"); // 通知父组件接收
      this.handleClose();
    },
    // 点击关闭按钮时触发
    handleClose() {
      this.$emit('update:visible', false); // 使用 .sync 语法关闭父组件中的弹窗
    },
    // 点击“确认驳回”按钮时触发
    handleConfirm() {
      // 校验时间冲突类型时，必须填写时间范围
      if (this.rejectReasons.includes('空域使用时间冲突')) {
        if (!this.adjustTimeRange || this.adjustTimeRange.length !== 2) {
          this.$message.error('请选择时间调整建议（开始和结束时间）');
          return;
        }
      }

      // 校验空间冲突类型时，必须填写空域建议
      if (this.rejectReasons.includes('空域使用空间冲突')) {
        if (!this.adjustUsingAirspace.trim()) {
          this.$message.error('请输入空域调整建议');
          return;
        }
      }

      // 至少要选一个驳回原因
      if (this.rejectReasons.length === 0) {
        this.$message.error('请至少选择一个驳回原因');
        return;
      }

      // 构造提交给父组件的 payload 数据
      const payload = {
        applicationId: this.applicationId,
        newApprovalStatus: 2,
        rejectReason: this.rejectReasons.join(','), // 多选原因拼接为字符串
        adjustUsingStartTime: this.adjustTimeRange?.[0] || null,
        adjustUsingEndTime: this.adjustTimeRange?.[1] || null,
        adjustUsingAirspace: this.adjustUsingAirspace
      };

      // 触发自定义事件，通知父组件处理提交
      this.$emit('confirm-reject', payload);
      this.handleClose(); // 关闭弹窗
    },
    startAnalysis() {
      this.analyzing = true;
      setTimeout(() => {
        this.analyzing = false;
        this.showResultSection = true;

        // 默认由父组件传入的分析结果控制展示状态
        // 如果你需要模拟分析，可在此设置：
        // this.weatherStatus = 'failed'
        // this.airspaceStatus = 'success'
      }, 2000); // 模拟分析时长
    },

  }
};
</script>

<style scoped>
/* 外层容器样式 */
.reject-dialog-wrapper {
  position: fixed;
  top: 15%;
  left: 25%;
  width: 50%;
  /* background-color: rgba(0, 0, 0, 0.6); */
  /* background-image: url('../assets/img/module2/bg.png'); */
  /* background-image: url("../assets/img/module5/dialog/container.png"); */
  /* background-size: cover; */
  color: white;
  border-radius: 8px;
  padding: 20px;
  z-index: 9999;
}

/* 标题样式 */
.dialog-header {
  display: flex;
  width: 100%;
  height: 3rem;
  justify-content: center;
  align-items: center;
  position: relative;
  background-image: url("../assets/img/module5/dialog/headbar.png"), url("../assets/img/module5/dialog/dialogtopimg1.png"), url("../assets/img/module5/dialog/dialogtopimg2.png");
  background-position: center, center, center;
  background-size: cover, auto, cover;
  background-repeat: no-repeat, no-repeat, no-repeat;
  border-top-left-radius: 10px;
  /* 左上角圆角 */
  border-top-right-radius: 10px;
  /* 右上角圆角 */
}

.dialog-title {
  font-size: 1.5rem;
  color: #ffffff;
  text-align: center;
  margin: 0;
}


.reject-dialog-container {
  /* background-image: url("../assets/img/module2/bg.png");
  background-size: 100% 100%; */
  background-image: url("../assets/img/module5/dialog/container.png");
  background-color: rgba(255, 255, 255, 0.041);
  /* 使用透明度叠加 */
  padding: 0px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  position: relative;
  top: 10%;
  left: 0%;
  padding: 0px;
  flex-grow: 1;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

/* 输入框/文本域样式（半透明） */
.reject-form>>>.el-input__inner,
.reject-form>>>.el-textarea__inner {
  background-color: rgba(255, 255, 255, 0.08);
  border: none;
  color: white;
}

/* 复选框标签颜色 */
.reject-form>>>.el-checkbox__label {
  color: #ccc;
}

/* 自定义关闭按钮样式（右上角） */
.dialog-close-btn {
  background-image: url('../assets/img/nav/关闭.png');
  background-color: transparent;
  background-size: contain;
  background-repeat: no-repeat;
  border: none;
  width: 25px;
  height: 25px;
  position: absolute;
  top: 10px;
  right: 15px;
  cursor: pointer;
}

/* 按钮区域 */
.button-group {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
  margin-right: 10px;
  margin-bottom: 10px;
}

/* elementUI 按钮间距 */
.el-button {
  margin-left: 10px;
}

/* label 字体颜色 */
.el-form-item__label {
  color: #eff1f5;
}

.analysis-result {
  margin: 20px 30px;
}

.result-item {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.result-item .label {
  color: #87b7da;
  width: 120px;
  font-size: 14px;
}

/* 新增统一按钮样式 */
.analysis-btn {
  width: 8.7%;
  height: 2rem;
  background-size: cover;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  background-color: transparent;
  color: #fff;
  margin: 0 1rem;
  font-size: 16px;
}

.analysis-btn:first-child {
  background-image: url('../assets/img/module1/button-tijiao.png');
}

.analysis-btn:nth-child(2) {
  background-image: url('../assets/img/module1/button-tijiao.png');
}

/* 重置按钮背景图片 */
.analysis-btn:last-child {
  /* background-image: url('../assets/img/module1/button-bohui.png'); */
  background-image: url('../assets/img/module1/button-tijiao.png');
}

/* 鼠标悬停效果 */
.analysis-btn:hover {
  opacity: 0.8;
}

/deep/ .el-form-item--medium .el-form-item__label {
    color: white;
}
</style>